<!-- 
  title：对话框的标题
  confirmLoading：当前是否处于提交中
  titleCenter：对话框标题居中方式
  footerCenter：底部按钮的对其方式
  visible：是否显示弹窗
  width：设置对话框的宽度
  beforeClose：允许您指定在对话框关闭之前将调用的函数
  closeOnClickModal：确定单击对话框外部（在模态叠加层上）是否会关闭对话框
  center：控制对话框是否在屏幕中央
  customClass：允许您为对话框指定自定义类。此类可用于将自定义样式应用于对话框
  showFooter：确定是否显示带有“取消”和“确认”按钮的默认页脚
 -->
<template>
  <el-dialog :visible.sync="dialogVisible" :width="width" :before-close="handleBeforeClose"
    :close-on-click-modal="closeOnClickModal" :center="center" :custom-class="customClass" :show-close="true">
    <div slot="title" :style="{ 'textAlign': titleCenter, 'font-size': '16px', 'font-weight': 'bold' }">
      <span>{{ title }}</span>
    </div>
    <slot></slot>
    <div slot="footer" v-if="showFooter" :style="{ 'text-align': footerCenter }" class="dialog-footer">
      <el-button type="primary" :loading="confirmLoading" @click="handleConfirm" size="small">{{ confirmLoading ? "提交中"
    : "确 定" }}</el-button>
      <el-button @click="handleCancel" size="small">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "hsk-dialog",
  props: {
    title: { //对话框的标题
      type: String,
      default: "",
    },
    confirmLoading: {  //当前是否处于提交中
      type: Boolean,
      default: false,
    },
    titleCenter: {  //对话框标题居中方式
      type: String,
      default: "center",
    },
    footerCenter: { //底部按钮的对其方式
      type: String,
      default: "center",
    },
    visible: { //是否显示弹窗
      type: Boolean,
      default: false,
    },
    width: { //设置对话框的宽度
      type: String,
      default: "400px",
    },
    beforeClose: { //允许您指定在对话框关闭之前将调用的函数
      type: Function,
      default: null,
    },
    closeOnClickModal: { //确定单击对话框外部（在模态叠加层上）是否会关闭对话框
      type: Boolean,
      default: true,
    },
    center: { //控制对话框是否在屏幕中央 ( true) 或不在屏幕中央 ( false)。
      type: Boolean,
      default: true,
    },
    customClass: {  //允许您为对话框指定自定义类。此类可用于将自定义样式应用于对话框
      type: String,
      default: "",
    },
    showFooter: { //确定是否显示带有“取消”和“确认”按钮的默认页脚
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dialogVisible: this.visible,
    };
  },
  watch: {
    visible(newValue) {
      this.dialogVisible = newValue;
    },
    dialogVisible(newValue) {
      this.$emit("update:visible", newValue);
    },
  },
  methods: {
    handleBeforeClose(done) {
      if (this.beforeClose) {
        this.beforeClose(done);
      } else {
        done();
      }
    },
    handleCancel() {
      // this.$emit('update:visible', false);
      this.dialogVisible = false;
      this.$emit("cancel");
    },
    handleConfirm() {
      if (!this.confirmLoading) {
        // this.dialogVisible = false;
        this.$emit("confirm");
      }

    },
  },
};
</script>

<style scoped>
/* Add your custom styles here */
/deep/.el-dialog__body {
  padding: 30px 55px !important;
}

.dialog-footer {
  text-align: right;
  margin-top: 10px;
}

.el-openDialog__header {
  margin-bottom: 10px;
}

.el-dialog__footer {
  margin-bottom: 31px;
}
</style>
